<template>
	<view>
		<u-skeleton v-if="loading" rows="4" title :loading='loading'>
		</u-skeleton>
		<view v-else class="detail">
			<view class="title">
				{{articleDetail.title}}
			</view>
			<view class="userInfo">
				<view class="avatar">
					<image :src="articleDetail.user_id[0].avatar_file.url" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">
						{{articleDetail.user_id[0].username}}
					</view>
					<view class="time">
						<uni-dateformat :date="articleDetail.publish_date" :threshold="[0,3600000]"></uni-dateformat>
					</view>
				</view>
			</view>
			<view class="content">
				<u-parse :content="articleDetail.content" :tagStyle="style"></u-parse>
			</view>
			<view class="bottom">
				<view @click="likeIt" :style="articleDetail.islike?'background-color:#0199FE':''" class="likeCount">
					<u-icon name="thumb-up-fill" size='30' color="#fff"></u-icon>
					<view class="countNum">
						{{articleDetail.like_count}}
					</view>
				</view>
				<view class="avatar">
					<image src="../../static/images/user-fill.png" mode="aspectFill"></image>
				</view>
				<view class="viewCount">
					{{articleDetail.view_count}}人看过
				</view>
			</view>


		</view>
	</view>

</template>

<script>
	const utilsObj=uniCloud.importObject("utilsObj",{
		customUI: true
	});
	import {
		getImgSrc
	} from "@/utils/tools.js"
	const db = uniCloud.database()
	export default {
		data() {
			return {
				articleDetail: {},
				imageSrc: [],
				loading: true,
				articleId: '',
				style: {
					p: 'line-height:2em',
				},
				like: false,
			};

		},
		methods: {
			getArtDetail(id) {
				const user = db.collection('uni-id-users').field('_id,nickname,avatar_file,username').getTemp()
				const article = db.collection('lxArticle').where(`_id == '${this.articleId}'`).getTemp()
				const likeTable = db.collection('lxArticleLike').where(`article_id=="${this.articleId}" && user_id==$cloudEnv_uid`).getTemp()
				db.collection(article, user, likeTable).get({
					getOne: true
				}).then(res => {
					this.articleDetail = res.result.data
					this.imageSrc = getImgSrc(this.articleDetail.content)
					this.imageSrc.map((item, index) => {
						this.articleDetail.content = this.articleDetail.content.replace(item, this
							.articleDetail.picurls[index])
					})
					this.loading = false
					if(this.articleDetail._id.lxArticleLike.length){
						this.articleDetail.islike=true
						
					}else{
						this.articleDetail.islike=false
						
					}
					console.log(res)
				})
			},
			async likeIt() {
				
				let count = await db.collection("lxArticleLike")
					.where(`article_id=="${this.articleId}" && user_id==$cloudEnv_uid`).count()
				if (count.result.total) {
					db.collection("lxArticleLike").where(`article_id=="${this.articleId}" && user_id==$cloudEnv_uid`)
						.remove().then(res => {
							this.articleDetail.islike=false
							this.articleDetail.like_count-=1
						});
					utilsObj.operation("lxArticle", "like_count", this.articleId, -1)

				} else {
					db.collection('lxArticleLike').add({
						article_id: this.articleId
					}).then(res => {
						this.articleDetail.islike=true
						this.articleDetail.like_count+=1
					})
					utilsObj.operation("lxArticle", "like_count", this.articleId, 1)
				}

			},
			viewCount(id) {
				utilsObj.operation('lxArticle', 'view_count', id, 1)
			},
		},
		onLoad(e) {
			this.articleId = e.id
			this.getArtDetail(e.id)
			this.viewCount(e.id)
		
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding: 30rpx;

		.title {
			font-size: 45rpx;
			font-weight: 550;
			line-height: 1.4em;

		}

		.userInfo {
			margin-top: 20rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			.info {
				margin-left: 20rpx;

				.name {
					font-size: 30rpx;
				}

				.time {
					font-size: 20rpx;
					color: #959595;
				}
			}
		}

		.content {
			margin-top: 30rpx;
		}

		.bottom {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;

			.likeCount {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 250rpx;
				height: 120rpx;
				border-radius: 80rpx;
				background-color: #E3E3E3;
			}

			.avatar,
			.viewCount {
				margin-top: 20rpx;
			}


		}

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

		}

	}
</style>